import React, { Component } from 'react';
import { Icon, Button, Table, Popconfirm, Switch, Form, Input } from 'antd';
import { IndexLink, Link } from 'react-router';

import styles from './wilddog.less';
import  AddOneMessage from './AddOneMessage';



export class MessageList extends Component {
  constructor(props) {
    super(props);
     this.state = {
      selectedRowKeys: [],
      selectedRows: [],
      pagination: { pageSize: 20 }
    }
  }
 handleTableChange(pagination, filters, sorter) {
    let { messageData}=this.props.wilddog;
    // console.log(pagination, filters, sorter);
    if (pagination.pageSize * pagination.current === pagination.total) {
      let payload = {
        messageId: messageData[messageData.length-1].id||0,
        roomId: this.props.roomId
      }
      this.props.getMoreMessages(payload);
    }
  }
  addOneMessageHandler(name, message) {
   
    let { roomId,auth} = this.props;
    let  photoData  = [
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0',
    'http://wx.qlogo.cn/mmopen/PiajxSqBRaEIvYHSpeh7SqcMnUzggRsOjMnNACIaaJEQ0Y4BHl1jfMcicnG1MFGZmToyujPNnUdoMqSuFqibBlstA/0'
    ]
    let payload = {
      messageInfo: {
        userId: auth.uid,
        name: name,
        message: message,
        type: 'defualt',
        photo: photoData[Math.floor(Math.random() * 10)],
        checked: true
      },
      roomId: roomId
    }
    if (payload.type === 'private') {
      // console.log('私有聊天室');
    }
    this.props.addMessage(payload)
  }

  delOneMessageHandler(message) {
    let payload = {
      id: message.id,
      roomId: this.props.roomId
    }
    this.props.delOneMessage(payload);

  }
  delMessagesHandler() {
    let { selectedRows } = this.state||[];
    // console.log(selectedRows)
    let messageArray = selectedRows.map(record => record.id);
    let payload = {
        messageInfo: messageArray,
        roomId: this.props.roomId
      }
      // console.log(selectedRows,messageArray)
    this.props.delMessages(payload)
  }
  toggleCheckHandler(message) {
    message.checked = !message.checked;
    let payload = {
      message: message,
      roomId: this.props.roomId
    }
    // console.log(payload);
    this.props.updateMessage(payload);

  }
  onSelectChange(selectedRowKeys, selectedRows) {
    // console.log('selectedRowKeys changed: ', selectedRows,selectedRowKeys,this);
    this.setState({ selectedRowKeys, selectedRows });
  }
  render() {
     const { selectedRowKeys } = this.state;
    const {messageList}=this.props;
    const {auth}=this.props;
     const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
    };
    const hasSelected = selectedRowKeys.length > 0;
      const columns =[{
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
      width:'15%',
      render: text => <a href="#">{text}</a>,
    }, {
      title: '留言内容',
      dataIndex: 'message',
      key: 'message',
      width:'30%',
      render: text => <a href="#">{text}</a>,
    }, {
      title: '头像',
      dataIndex: 'photo',
      key: 'photo',
      render: text => <img style={{width:60}} src={text} />,
    }, {
      title: '审核',
      dataIndex: 'checked',
      key: 'checked',
      filters: [
        { text: '已通过', value: true },
        { text: '未通过', value: false },
      ],
      onFilter: (value, record) => value == record.checked.toString(),
      render: (text, record) => (<div className="setting">
                        <p>
                        <Button type={record.checked?'primary':"warning"} 
                                  onClick={()=>{return this.toggleCheckHandler(record)}}> 
                          
                              {record.checked?'通过':" 未通过"}
                        
                        </Button>
                        </p>
                      </div>)

    }, {
      title: 'Action',
      key: 'action',
      render: (text, record, index) => (
        <span>
           <Popconfirm title="确认删除咩?" onConfirm={()=>{return this.delOneMessageHandler(record)}}>
              <a href="#">Delete</a>
            </Popconfirm>  
          </span>
      ),
    }];


    return (
       <div id="wilddog">
              <AddOneMessage handAdd={this.addOneMessageHandler.bind(this)} />
            <div className="container-wilddog">
             
            <div style={{ marginBottom: 16 }}>
             <Popconfirm title="确认删除咩?" onConfirm={this.delMessagesHandler.bind(this)}>
              <Button type="primary" 
                disabled={!hasSelected} 
              
              >批量删除</Button>
              </Popconfirm>
              <span style={{ marginLeft: 8 }}>{hasSelected ? `一共选中了 ${selectedRowKeys.length} 个条目` : ''}</span>
             </div>
            <Table    simple 
                rowSelection={rowSelection} 
                className={styles.tableMessage} 
                bordered 
                scroll={{x: 1200 }}            
                columns={columns} 
                dataSource={messageList}
                rowKey={record => record.id} 
                    />
            </div>
      
        
      </div>
    

    )
  }
}


export default MessageList
